{extend name="public/audit" /}
{block name='body'}
<div class="fly-panel" style="padding: 10px;">
    <div class=" layui-form-pane">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-form layui-tab-content" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div>
                        <div class="layui-row layui-col-space15 layui-form-item">
                            <div>
                                <label for="catName" class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="catName" name="Name" required lay-verify="required"
                                           autocomplete="off" class="layui-input" style="width: 263px;">
                                </div>
                            </div>

                            <div>
                                <div class="avatar-add">
                                    <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                                    <button type="button" class="layui-btn upload-img" id="uploadCatImg">
                                        <i class="layui-icon">&#xe67c;</i>上传图标
                                    </button>
                                    <img src="" id="catImg">
                                    <span class="loading"></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">

                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" style="width: 373px;" id="submit">立即添加分类</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['upload', 'jquery', 'layer', 'form'], function () {
        let layer = layui.layer, $ = layui.jquery, upload = layui.upload, form = layui.form;
        let iconSrc = '';
        let name = '';
        let isSelect = false;
        $('#submit').click(function ()
        {
            if(isSelect===false){
                return layer.msg('请选择分类logo');
            }
        });
        upload.render({
            elem: '#uploadCatImg',
            url: "{:url('base/upload')}",
            auto: false,
            bindAction: '#submit',
            choose: function (obj) {
                obj.preview(function () {
                    $('#catImg').attr('src', arguments[2]);
                    isSelect = true;
                });
            }
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                name = $('#catName').val();
                if (!name) return layer.msg('名称不能为空');
                if (!isSelect) return layer.msg('必须选择图片');
                layer.load(); //上传loading

            }
            , done: function (res, index, upload) {
                layer.closeAll('loading'); //关闭loading
                let iconSrc = res.data;
                let Name = $('#catName').val();
                if (!Name) return layer.msg('名称不能为空');
                if (!iconSrc) return layer.msg('必须有图标');
                $.post("{:url('audit/addCatApi')}", {Name: Name, Icon: iconSrc}, function (res) {
                    if(res.errno===12001){
                        return layer.alert('该分类已存在');
                    }
                    if (res.errno === 0) {
                       layer.confirm('添加成功', {
                            btn: ['继续添加','返回'] //按钮
                        }, function(){
                            layer.closeAll();
                        }, function(){
                           let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                           parent.layer.close(index);
                           location.reload();
                        });
                    } else {
                        layer.msg(res.errmsg);
                    }
                });
            }
            , error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        })

    });
</script>
{/block}